<template>
  <div>
    <basic-layout :title="'区域列表'" :showFilterBtn="false" :showAddBtn="false" :showSaveBtn="true"
                  @handleSave="uploadData()">
      <!-- 列表 -->
      <van-row class="listCard">
        <van-pull-refresh
          v-if="dataList.length"
          class="cardVanPullRefresh1"
          v-model="refreshing"
          @refresh="onRefresh">
          <van-list
            v-if="dataList.length > 0"
            v-model="loading"
            :finished="finished"
            finished-text="已经到底啦"
            @load="nextPage"
            :mmediate-check="false"
            :offset="100"
          >
            <div v-for="item in dataList" class="dataStyle" v-if="dataList.length > 0">
              <div class="hengXian">
                <div class="dataBStyle">
                  <div class="listLeft">
                    <span class="ziti">{{ item.FANGCNAME }}</span>
                  </div>
                  <div class="dh" style="color: #aaaaaa">
                    <span >{{ item.PDRQ }}</span>
                    <div class="aImgStyle1">
                      <span v-if="dataInfo.JHZT === '02'" style="color: red">未完成</span>
                      <span v-else style="color: green">完成</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="listMain">

                <div class="sh">
                  <div style="float: left;color:#aaa;margin-left: 10px;font-size: 0.4rem;">
                    <span>盘点结果:</span>
                  </div>
                    <div v-if="item.ZCSL && item.ZCSL != ''" style="float: left;color: #07b7ee">
                      &nbsp;&nbsp;&nbsp;<span>盘平({{ item.ZCSL }})</span>
                    </div>
                    <div v-if="item.PKSL && item.PKSL != ''" style="float: left;color: #ff0000">
                      &nbsp;&nbsp;&nbsp;<span>盘亏({{ item.PKSL }})</span>
                    </div>
                    <div v-if="item.PYSL && item.PYSL != ''" style="color: green">
                      &nbsp;&nbsp;&nbsp;<span>盘盈({{ item.PYSL }})</span>
                    </div>
                </div><br/>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">房间名称:&nbsp;&nbsp;</span>
                  {{ item.FJXXNAME }}
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">所属楼层:&nbsp;&nbsp;</span>
                 {{ item.LCXXNAME }}
                </div>
                <div class="sh">
                  <span style="color:#aaa;margin-left: 10px;font-size: 0.4rem;">房&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;间:&nbsp;&nbsp;&nbsp;</span>{{
                    item.FJXXNAME
                  }}
                </div>
                <div class="bImgStyle">
                    <van-button color="green" plain @click="inventory(item)">扫码盘点</van-button>
                </div>
              </div>

              <div class="mapMainImgStyle">
                <div v-if="dataInfo.JHZT === '02'" class="mapImgStyle"/>
                <div v-else class="mapImgStyleOk"/>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </van-row>
    </basic-layout>
  </div>
</template>
<script>
import { queryPandQy, queryPandjg, updateJhzt } from '@/api/srvAssurance/assetLabel/assetLabel'

export default {
  components: {},
  data () {
    return {
      inputSearchValue: '',
      active: 0,
      dataList: [],
      loading: false,
      finished: false,
      refreshing: false,
      queryParam: {
        jhzt: '03',   //经过调用接口，发现是固定值。
        id: '',
        pageIndex: 1,
        pageSize: 10,
      },
      dataInfo: {},
    }
  },

  created () {
    let data = this.$route.query.dataInfo
    if (JSON.stringify(data) != '"[object Object]"') {
      this.queryParam.pdjhid = data.ID || ''
      this.dataInfo = data
      sessionStorage.setItem('areaList-dataInfo', JSON.stringify(data))
    } else {
      var item = sessionStorage.getItem('areaList-dataInfo')
      var dataParse = JSON.parse(item)
      this.queryParam.pdjhid = data.ID || ''
      this.dataInfo = dataParse
    }
    this.initData()
  },

  methods: {
    onRefresh () {
      this.initData()
    },

    async initData () {
      this.queryParam.pageIndex = 1
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    async refresh () {
      this.finished = false
      this.refreshing = true
      await this.getDataList()
      this.refreshing = false
    },

    // 加载下一页
    nextPage () {
      // 判断第一次查出来的数据是否还有下一页数据，如果没有则不调接口
      if (this.dataList.length < (this.queryParam.pageIndex * this.queryParam.pageSize)) {
        this.finished = true
        return
      }
      setTimeout(() => {
        this.queryParam.pageIndex += 1
        this.getDataList()
      }, 1000)
    },

    async getDataList () {
      this.loading = true
      this.queryParam.id = this.dataInfo.ID
      let res = await queryPandQy(this.queryParam)
      if (res.status == 0) {
        if (this.queryParam.pageIndex == 1) {
          // 清空列表数据
          this.dataList = []
        }
        this.dataList = this.dataList.concat(res.data)
        // 如果数据加载完毕，finished 标志位置为 true，滑到页面底部则不会再触发 nextPage() 方法了。
        if (this.dataList.length >= res.totalCount) {
          this.finished = true
        }
      }
      this.loading = false
    },

    goBack () {
      if (this.dataList.length == 0) {
        this.$dialog.confirm({
          confirmButtonText: '确定上传',
          cancelButtonText: '不上传',
          title: '提示',
          message:
            '当前盘点计划已经全部完成，是否上传盘点结果？',
        }).then(async () => {
          this.uploadData()
        }).catch(() => {
          this.$router.back()
        })
      } else {
        this.$router.back()
      }
    },

    inventory (item) {
      this.$router.push({
        path: '/materialInventory/inventory',
        query: {
          dataInfo: this.dataInfo,
          param: item
        }
      })
    },

    async uploadData () {
      this.queryParam.id = this.dataInfo.ID
      let res = await updateJhzt(this.queryParam)
      if (res.status == 0) {
        this.$toast.success('盘点计划提交成功')
        this.$router.push({
          path: '/materialInventory/index',
        })
      }
    },

  }
}
</script>

<style scoped lang="less">
.myBtn {
  position: absolute;
  right: 15px;
  top: 12px;
  font-size: 18px;
}
.listCard {
  height: calc(100% - 1px);
  width: 100%;
  z-index: 999;
  overflow: auto;
  justify-content: flex-start;
  align-items: center;
  background-color: #8080803b;

  .btnBox {
    position: absolute;
    bottom: 0px;
    width: 100%;
    height: 50px;
    text-align: center;
    top: 19.9rem;
  }
  .cardVanPullRefresh1 {
    .dataStyle {
      height: 176px;
      margin: 10px;
      background-color: #FFFFFF;
      line-height: 23px;
      border-radius: 3px;
      font-size: 0.4rem;

      .hengXian {
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        line-height: 0.64rem;
      }

      .dataBStyle {
        height: 55px;
        position: relative;

        .listLeft {
          margin-left: 10px;
          font-size: 0.4rem;
          font-weight: bold;
          padding-top: 9px;

          .ziti {
            margin-top: 1px;
          }

        }

        .dh {
          margin-left: 10px;
          font-size: 0.3rem;

          .aImgStyle1 {
            position: absolute;
            top: 0.4667rem;
            right: 0.68rem;
            font-size: 15px;
            margin-left: 78%;
          }
        }
      }


      .listMain {
        line-height: 29px;
        position: relative;
        .bImgStyle {
          position: absolute;
          top: 65px;
          right: 15px;
          .van-button {
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            border-radius: 17px;
            font-size: 13px;
          }
        }
        .downOtherProcess {
          width: 80%;
          float: left;
        }

        .downOtherText {
          transform: translateY(-5px);
          width: 100%;
        }
      }
    }

    /deep/ .van-progress__pivot {
      display: none;
    }

    /deep/ .van-progress {
      height: 11px;
      margin-top: 4px;
    }

    .custom-image {
      height: 100%;
    }
  }
}
</style>
